<template>
	<view class="identity_wrap">
		<u-icon class="identity-icon" color="var(--echo-main-color)" name="account" size="120px"></u-icon>
		<u--form
			class="identity_form"
			ref="uForm"
			labelWidth="auto"
			labelPosition="top"
			:labelStyle="labelStyle"
			:model="model1"
			:rules="rules"
		>
			<u-form-item
				label="姓名"
				prop="name"
				ref="item1"
			>
				<u--input
					class="identity_input"
					border="surround"
					placeholder="请输入姓名"
					v-model="model1.name"
				></u--input>
			</u-form-item>
			<u-form-item
				label="身份证号"
				prop="identity"
				ref="item1"
			>
				<u--input
					class="identity_input"
					placeholder="请输入身份证号"
					v-model="model1.identity"
					border="surround"
				></u--input>
			</u-form-item>
		</u--form>
		<u-button class="identity_btn" shape="circle" color="var(--echo-main-color)" @click="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				labelStyle:{
					color:'#26252',
				},
				model1:{
					name:'',
					identity:'',
				},
				rules: {
					name: [
						{
							required: true,
							message: '请输入姓名',
						}
					],
					identity: [
						{
							required: true,
							message: '请输入身份证号',
						}
					],
				},
			}
		},
		methods:{
			submit() {
				this.$refs.uForm.validate().then(res => {
					console.log(this.model1.identity)
				}).catch(errors => {
					return
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.identity_wrap {
		margin-top: 120rpx;
		padding: 40rpx 50rpx;
		min-height: 100vh;
			.identity-icon {
				margin-left: 50%;
				transform: translateX(-120rpx);
			}
		.identity_form {
			margin-bottom: 20rpx;
		}
	}
</style>
